<template>
  <a class="fx-link" :class="[type,{disabled,underline}]"
     :href="disabled?'javascript:;':$attrs.href" v-bind="$attrs">
    <i class="iconfont" :class="icon" v-if="icon"/>
    <slot></slot>
  </a>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ComponentTypes, componentTypesArr } from '@/base/types'

export interface LinkProps {
  type: ComponentTypes | 'default' | 'info';
  disabled: boolean;
  underline: boolean;
  icon: string;
}

export default defineComponent({
  name: 'FLink',
  props: {
    // 类型
    type: {
      type: String as PropType<ComponentTypes | 'default' | 'info'>,
      default: 'default',
      validator (val: string): boolean {
        return [...componentTypesArr, 'default', 'info'].includes(val)
      }
    },
    // 禁用
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    // 下划线
    underline: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    // icon
    icon: {
      type: String as PropType<string>,
      default: null
    }
  }
})
</script>
